/* eslint-disable vue/no-unused-components */
<template >
    <div>
  <!-- <el-steps :active="step" align-center>
  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
  <el-step title="步骤2"  @click.native ="stepClick('item.index')"  description="这是一段很长很长很长的描述性文字"></el-step>
  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
  </el-steps> -->

  <el-steps :active="step" align-center >
<el-step 
:title="item.title" 
:description='item.description'
 @click.native ="stepClick(item.index)" 
 v-for="item in stepData" 
 :key ="item.index"></el-step>
</el-steps>

   
    <keep-alive  name="fade">
    <router-view></router-view>
</keep-alive>

   <!-- <keep-alive name="fade">
     <Steps1 @steps1="next1" v-if="step == 1 ? true : false"></Steps1>
     <steps2 v-if="step == 2 ? true : false"></steps2>
      </keep-alive> -->

      
    <el-button style="margin-top: 12px;" @click="handlePreStep">上一步</el-button>
  <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
     
    </div>
</template>

<script>

import Steps1 from './steps1'
import steps2 from './steps2'
export default {
  data(){
    return{
       step: 0,
       isRouter: false,
       stepData:[],
       stepData1: [{index: 0, title: '步骤1',description:'2333'},
           {index: 1, title: '步骤2',description:'2333'},
           {index: 2, title: '步骤3',description:'2333'}],
      stepData2: [{index: 0, title: '3333', description:'2333'},
     {index: 1, title: '步骤23333', description:'2333'},
   {index: 2, title: '步骤33333', description:'2333'}],

    }

  },
    components: {
      // Steps1,
      // steps2,
    },
  created(){
      this.stepDataF()
  },
 
   methods: {
     stepDataF(){
         console.log("修改成功！---------初始化-----this.step-------------" +this.step)
         this.stepData=  this.stepData1;
     },
     handlePreStep: function () {
            this.$router.go(-1);
            // this.$router.back()
            this.step--;
              console.log("修改成功！---------上异步-----this.step-------------" +this.step)
            if( this.step =="2"){
              //数据清空 重新赋值
               this.stepData= [];
                this.stepData=   this.stepData1
               console.log("修改成功！---------上异步-----this.step-------------" +this.step)
            }
            // this.goStep(this.step); 
      },next1(data){
  console.log("修改成功！--------------next1-------------" +data)
  this.step=2
      },
        next(){
        // if (this.active++ > 2) this.active = 0;
           this.$router.push('/zhanghu/steps/step'+(this.step++));
             console.log("修改成功！--------------this.step-------------" +this.step)
             if(this.step =="2"){
               // 添加步骤数据
           this.stepData=  this.stepData.concat(this.stepData1)
             }
              var _this = this;
           
                 console.log("修改成功！--------------this.step-+++------------" +this.step)
          //   setTimeout(function () {
          //     if(_this.isRouter){
          //         _this.step++;
          //         // _this.goStep(_this.step);
          //     }
          // }) 
        
            // this.$message({
            //       message: "修改成功！",
            //       type: "success"
            //     });
        }
      },
      stepClick(val){

        console.log("修改成功！---------------------------" +val)
 
      },
         watch:{
        '$route': function (to,from) {
            this.isRouter = true;
        }
    }
}
</script>


<style lang="scss" scoped>
.el-step__head:hover {
  color: #67c23a;
  border-color: #67c23a;
}
</style>